const { createApp } = Vue;

const app = createApp({
    data() {
        return {
            isLoggedIn: false,
            activeTab: 'dashboard',
            loginForm: {
                username: '',
                password: ''
            },
            userInfo: {},
            stats: {
                userCount: 0,
                roleCount: 0,
                permissionCount: 0
            },
            users: [],
            roles: [],
            permissions: []
        }
    },
    mounted() {
        this.checkLoginStatus();
    },
    methods: {
        async login() {
            try {
                const response = await axios.post('/api/auth/login', this.loginForm);
                if (response.data.code === 200) {
                    localStorage.setItem('token', response.data.data.token);
                    localStorage.setItem('userInfo', JSON.stringify(response.data.data.user));
                    this.isLoggedIn = true;
                    this.userInfo = response.data.data.user;
                    this.loadStats();
                    this.loadUsers();
                } else {
                    alert(response.data.message || '登录失败');
                }
            } catch (error) {
                alert('登录失败: ' + (error.response?.data?.message || error.message));
            }
        },
        
        logout() {
            localStorage.removeItem('token');
            localStorage.removeItem('userInfo');
            this.isLoggedIn = false;
            this.userInfo = {};
        },
        
        checkLoginStatus() {
            const token = localStorage.getItem('token');
            const userInfo = localStorage.getItem('userInfo');
            if (token && userInfo) {
                this.isLoggedIn = true;
                this.userInfo = JSON.parse(userInfo);
                this.loadStats();
                this.loadUsers();
            }
        },
        
        async loadStats() {
            try {
                const response = await axios.get('/api/dashboard/stats', {
                    headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
                });
                if (response.data.code === 200) {
                    this.stats = response.data.data;
                }
            } catch (error) {
                console.error('获取统计信息失败:', error);
            }
        },
        
        async loadUsers() {
            try {
                const response = await axios.get('/api/users', {
                    headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
                });
                if (response.data.code === 200) {
                    this.users = response.data.data.list || response.data.data;
                }
            } catch (error) {
                console.error('获取用户列表失败:', error);
            }
        },
        
        async loadRoles() {
            try {
                const response = await axios.get('/api/roles', {
                    headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
                });
                if (response.data.code === 200) {
                    this.roles = response.data.data.list || response.data.data;
                }
            } catch (error) {
                console.error('获取角色列表失败:', error);
            }
        },
        
        async loadPermissions() {
            try {
                const response = await axios.get('/api/permissions', {
                    headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
                });
                if (response.data.code === 200) {
                    this.permissions = response.data.data.list || response.data.data;
                }
            } catch (error) {
                console.error('获取权限列表失败:', error);
            }
        }
    },
    watch: {
        activeTab(newTab) {
            if (newTab === 'roles') {
                this.loadRoles();
            } else if (newTab === 'permissions') {
                this.loadPermissions();
            }
        }
    }
}).mount('#app');

// 配置axios默认设置
axios.defaults.baseURL = 'http://localhost:8080';
axios.interceptors.request.use(config => {
    const token = localStorage.getItem('token');
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
});

axios.interceptors.response.use(
    response => response,
    error => {
        if (error.response?.status === 401) {
            localStorage.removeItem('token');
            localStorage.removeItem('userInfo');
            window.location.reload();
        }
        return Promise.reject(error);
    }
);